<template>
    <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='pageApi' :buttons='buttons'>
        <!-- <template #user="{record}">
            <span>{{ record.user.nickname }}</span>
        </template> -->
        <template #deviceId="{ record }">{{ record.deviceId }} #{{ PORT_NAME[record.port] }}</template>
        <template #status="{record}">
            <a-tag v-if="record.status == 0">wattig</a-tag>
            <a-tag v-else-if="record.status == 1" color="processing">充电中</a-tag>
            <a-tag v-else-if="record.status == 2" color="success">完成</a-tag>
            <a-tag v-else color="error">失败</a-tag>
        </template>
        <template #$action="{ record }">
            <BTextButton @click="openDetail(record)">详情</BTextButton>
        </template>
    </BPTable>

    <a-drawer width="800px" destroyOnClose v-model:open="isOpenDetail">
        <a-descriptions bordered>
            <a-descriptions-item label="预充">{{ currentDetail.precharge }}{{ currentDetail.feeType == 0 ? '小时' : (currentDetail.feeType == 1 ? '度' : '元')}}</a-descriptions-item>
            <a-descriptions-item label="电价">{{ currentDetail.unitPrice }}元/度</a-descriptions-item>
            <a-descriptions-item label="服务费">{{ currentDetail.unitService }}元/度</a-descriptions-item>
            <a-descriptions-item label="订单状态">
                <a-tag v-if="currentDetail.status == 0">wattig</a-tag>
                <a-tag v-else-if="currentDetail.status == 1" color="processing">充电中</a-tag>
                <a-tag v-else-if="currentDetail.status == 2" color="success">完成</a-tag>
                <a-tag v-else color="error">失败</a-tag>
            </a-descriptions-item>
            <template v-if="currentDetail.status == 2">
                <a-descriptions-item label="实际充电时长">{{ formatTime(currentDetail.chargeData.time) }}</a-descriptions-item>
                <a-descriptions-item label="实际消耗电量">{{ currentDetail.consumeKwh }}kwh</a-descriptions-item>
                <a-descriptions-item label="最大功率">{{ currentDetail.chargeData.maxPower }}W</a-descriptions-item>
                <a-descriptions-item label="停止原因">{{ currentDetail.stopReasonText }}</a-descriptions-item>
            </template>
            <template v-if="currentDetail.status == 3">
                <a-descriptions-item label="失败原因">{{ currentDetail.failReasonText }}</a-descriptions-item>
            </template>
        </a-descriptions>

        <div class="m-t-20">
            <Params :id="currentDetail.id" />
        </div>
    </a-drawer>

</template>

<script lang='ts' setup>
    import { ref } from "vue";
    import { pageApi } from '@/api/ChargeOrder'
    import { parseTime } from "@/utils";
    import { PORT_NAME } from "@/constant";
    import Params from './Params.vue'
    

    const isOpenDetail = ref(false)
    const currentDetail = ref<any>()
    function openDetail(row) {
        currentDetail.value = row
        isOpenDetail.value = true
    }

    function formatTime(time:number) {
        let str = ""
        var hours = Math.floor(time / 3600);
        var minutes = Math.floor((time % 3600) / 60);
        var remainingSeconds = time % 60;
        if(hours > 0) {
            str += (hours + '小时')
        }
        if(minutes > 0) {
            str += (minutes + '分钟')
        }
        if(remainingSeconds > 0) {
            str += (remainingSeconds + '秒')
        }
        
        if(str == '') {
            str = '0分钟'
        }

        return str
    }

    const tableRef = ref()


    const buttons = ref<SearchButton[]>([])

    const columns = ref<Column[]>([
        {
            dataIndex : 'orderNo',
            title : '订单号',
            inSearch : true,
        },

        // {
        //     dataIndex : 'user',
        //     title : '用户',
        // },

        {
            dataIndex : 'deviceId',
            title : '设备号',
        },

        {
            dataIndex : 'consumeAmount',
            title : '消费金额（元）'
        },


        {
            dataIndex : 'status',
            title : '状态',
        },

        {
            title : '时间',
            dataIndex : 'createTime',
            align : 'center',
            customRender({text}) {
                return parseTime(text)
            }
        },

        {
            title : '结束时间',
            dataIndex : 'endTime',
            align : 'center',
            customRender({text}) {
                return parseTime(text)
            }
        },

        {
            title : '操作',
            dataIndex : '$action',
            align : 'center'
        }
    ])

    const dataRows = ref<any[]>([])
    
</script>